import wxCharts from '../../common/wxcharts-min.js'
let lineChart = null, startPos = null, data = [];
let date = {
  startTime: new Date().getTime(),
  endTime: new Date().getTime() + 1000 * 60 * 60 * 24 * 14
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: 0,
    date: '',
    show: false,
    count: 0,
    path_list: [], // 路线选择
    index: -1,
    minDate: new Date(2020, 0, 1).getTime(),
    //------------统计图--------------//
    canvasType: "no_ative", //canvas 绘制展示
    title_look: "拖动图标查看→",
    startXY: {
      x: 0,
      y: 0
    }, // 开始坐标
    endXY: {
      x: 0,
      y: 0
    }, // 结束坐标
    page: false,
    styles: "",
    select_index: 0,
    serivece: [],
    seriesData: [],
    maxNum: 0, // 当前统计图最大数据  
    windowWidth: 0, // 宽度
    tansline_id: "", // 路线id
    startTime: 0,
    endTime: 0,
    pickerConfig: {                     // 时间筛选
      endDate: true,
      dateLimit: false,
      initStartTime: wx.timestamp(date.startTime, 'day'),
      initEndTime: wx.timestamp(date.endTime, 'day'),
      limitStartTime: "2000-01-01",
      limitEndTime: "2100-12-31"
    },
    showChart: false
  },
  // 路线选择
  bindPickerChange(e) {
    console.log("路线", e)
    let {
      value
    } = e.detail || {};
    this.setData({
      index: Number(value) || 0,
      tansline_id: this.data.path_list[value].tansline_id
    })
  },
  onDisplay() {
    this.setData({
      show: true
    });
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  formatDate(date) {
    date = [new Date(date.startTime), new Date(date.endTime)];
    return `${date[0].getFullYear()}/${date[0].getMonth() + 1}/${date[0].getDate()}-${date[1].getFullYear()}/${date[1].getMonth() + 1}/${date[1].getDate()}`;
  },
  onConfirm(event) {
    this.setData({
      show: false,
      date: this.formatDate(event.detail),
      startTime: parseInt(new Date(event.detail.startTime).getTime() / 1000),
      endTime: parseInt(new Date(event.detail.endTime).getTime() / 1000),
    });
  },
  searchData() {
    this.setData({
      showChart: false
    })

    let data = {
      make_time_start: this.data.startTime,
      make_time_end: this.data.endTime,
      tansline_id: this.data.tansline_id
    }

    this.getData(data)
  },
  getData(data) {
    wx.$api.getBusinessData(data).then(res => {
      if (res.data.code == 200) {

        this.setData({
          count: res.data.data.total_num,
          showChart: true
        })

        this.canvas_chartData(res.data.data.list[0], res.data.data.list[1])
      } else {
        wx.$Toast(res.data.msg || "服务繁忙")
      }
    })
  },
  /**
   * 
   *  拖动
   * 
   */
  // touchHandler: function (e) {
  //   lineChart.scrollStart(e);
  //   let startXY = {
  //     x: e.changedTouches[0]['x'],
  //     y: e.changedTouches[0]['y']
  //   }
  //   this.setData({
  //     startXY: startXY
  //   })
  // },
  // moveHandler: function (e) {
  //   lineChart.scroll(e);
  // },
  // touchEndHandler: function (e) {
  //   console.log("进入",e);
  //   console.log("lineChart", lineChart)
  //   lineChart.scrollEnd(e);
  //   lineChart.showToolTip(e, {
  //     format: function (item, category) {
  //       console.log('item',item);
  //       console.log('category', category)
  //       return category + ' ' + item.name + ':' + item.data
  //     }
  //   });
  // },
  canvas_chartData: function (categoriesData, seriesData) {
    console.log("调用")
    var windowWidth = 0;
    var res = wx.getSystemInfoSync();
    windowWidth = res.screenWidth - 40;

    this.setData({ windowWidth: windowWidth })
    if (categoriesData.length > 0 && seriesData.length > 0) {
      console.log('windowWidth', windowWidth)
      lineChart = new wxCharts({
        canvasId: 'lineCanvas',
        type: 'column',
        categories: categoriesData,
        animation: true,
        series: [{
          name: '成交量1',
          data: seriesData,
          format: function (val) {
            return val + '件';
          }
        }],
        yAxis: {
          format: function (val) {
            return parseInt(val + 1) + '';
            // return Math.round(val);
          },
          min: 0,         // 最小值
          max: Math.max(...seriesData) + 10,        // 最大值
          fontColor: '#000000',
          gridColor: '#000000',
          titleFontColor: '#000000',
          topTitleFontColor: "#000000",
          disabled: false,
          type: 'calibration'
        },
        xAxis: {
          fontColor: '#000000',
          gridColor: '#000000',
          disabled: false
        },
        width: windowWidth,
        height: 200,
        dataLabel: true, // 是否显示图标里面的数据
        dataPointShape: true, // 是否在图表中显示数据点图形标识
        enableScroll: true, // 是否开启拖动
        extra: {
          lineStyle: '#000000',
          legendTextColor: '#6EB9FF'
        },
        title: {
          name: "8888",
          color: '#000000'
        },
        legend: false, // 图标下方标识
        subtitle: {
          color: '#000000'
        }
      });
    } else {
      wx.showToast({
        title: '暂无更多数据',
        icon: "none"
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      path_list: wx.getStorageSync('lineList')
    })

    this.setData({
      date: this.formatDate(date),
      startTime: parseInt(date.startTime / 1000),
      endTime: parseInt(date.endTime / 1000)
    });

    let data = {
      make_time_start: parseInt(date.startTime / 1000),
      make_time_end: parseInt(date.endTime / 1000),
      tansline_id: ''
    }

    this.getData(data)
  },
  touchstart: function (e) {
    lineChart.scrollStart(e);
  },
  touchmove: function (e) {
    lineChart.scroll(e);
  },
  touchend: function (e) {
    lineChart.scrollEnd(e);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})